<!-- 我的订单-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>我的订单</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>
	<style>


	.nav {
		position: fixed;
		left: 0;
		top: 0;
	  width: 100%;
	  display: flex;
	  height: 1.00rem;
	  line-height: 1.00rem;
	  justify-content: space-around;
	  background-color: #fff;
	}

	.nav_item {
	  position: relative;
	  height: 1.00rem;
	  font-size: .30rem;
	  color: #999;
	}

	.active {
	  color: #333;
	}

	.nav_item.active::after {
	  position: absolute;
	  left: -.05rem;
	  right: -.05rem;
	  bottom: 0;
	  height: .02rem;
		display: block;
		content: "";
	  border-radius: .01rem;
	  background-color: #ff502d;
	}

	/*订单列表  */
	.section{
	  background: #f5f5f5;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}

	.order {
	  padding-top: .20rem;
	}

	.order_bar {
	  display: flex;
	  height: 1.00rem;
	  line-height: 1.00rem;
	  padding: 0 .35rem 0 .30rem;
	  background-color: #fff;
	  border-bottom: 1px solid #eee;
	}

	.order_b_l {
	  flex: auto;
	  height: 1.00rem;
		display: flex;
	}

	.order_title, .d_pay {
	  font-size: .28rem;
	  color: #666;
	  margin-right: .10rem;
	}

	.order_num1 {
	  font-size: .24rem;
	  color: #999;
	}

	.order_b_r {
	  font-size: .30rem;
	  color: #ff502d;
	}

	.order_info {
	  min-height: 2.85rem;
	  background-color: #fff;
	}

	.up_part {
	  display: flex;
	  height: 1.77rem;
	  align-items: center;
	  border-bottom: 1px solid #eee;
	}

	.up_left {
	  height: 1.20rem;
	  width: 1.20rem;
	  border-radius: .10rem;
	  margin: 0 .20rem 0 .27rem;
	}

	.up_center {
	  flex: auto;
	}

	.shop_title, .up_price {
	  font-size: .28rem;
	  color: #666;
	  margin-bottom: .10rem;
	}

	.shop_color, .up_num {
	  font-size: .24rem;
	  color: #999;
	}

	.up_right {
	  text-align: right;
	  margin-right: .38rem;
	}

	.down_part {
	  display: flex;
	  height: 1.07rem;
	  align-items: center;
	  padding: 0 .20rem 0 .26rem;
	}

	.down_part_l {
	  display: flex;
	  align-items: center;
	  flex: auto;
	}

	.d_price {
	  font-size: .32rem;
	  color: #333;
	  font-weight: 800;
	}

	.down_part_r {
	  height: .56rem;
	  width: 1.70rem;
	  line-height: .56rem;
	  text-align: center;
	  font-size: .28rem;
	  color: #ff502d;
	  border: 1px solid #ff502d;
	  border-radius: .28rem;
	}

	.b_color {
	  color: #999;
	  border-color: #999;
	}

	.bg {
	  opacity: 0.6;
	}



	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<!-- 订单列表 -->
		<div class="order" v-for="(item,index) in list" :key="index" @click="order_detail(item.id)">
			<div class="order_bar">
				<div class="order_b_l">
					<div class="order_title">订单号：</div>
					<div class="order_num1">{{item.id}}</div>
				</div>
				<div>
					<div class="order_b_r" v-if="item.state==0">待支付</div>
					<div class="order_b_r" v-if="item.state==1">待发货</div>
					<div class="order_b_r" v-if="item.state==2">待收货</div>
					<div class="order_b_r b_color" v-if="item.state==3">已完成</div>
					<div class="order_b_r b_color" v-if="item.state==5">已取消</div>
					<div class="order_b_r b_color" v-if="item.state==6&&item.refund_status==2">退款中</div>
		      <div class="order_b_r b_color" v-if="item.state==6&&item.refund_status==4">退款被拒绝</div>
		      <div class="order_b_r b_color" v-if="item.state==6&&item.refund_status==5">退款成功</div>
				</div>
			</div>
			<div class="order_info">
				<div class="up_part" v-for="(item,index) in item.detail" :key="index" hover-class="bg">
					<image class="up_left" :src="item.image_center+'?imagediv2/1/w/150/h/150'"></image>
					<div class="up_center">
						<div class="shop_title">{{item.product_name}}</div>
						<div class="shop_color">{{item.sku_text}}</div>
					</div>
					<div class="up_right">
						<div class="up_price">¥{{item.unit_price}}</div>
						<div class="up_num">×{{item.nums}}</div>
					</div>
				</div>
				<div class="down_part">
					<div class="down_part_l">
						<div>
							<div class="d_pay" v-if="item.state==0||item.type==2&&item.state==1&&item.is_presale_state==2">需支付：</div>
							<div class="d_pay" v-else>已支付：</div>
						</div>
						<div class="d_price">{{item.pay}}元</div>
					</div>
					<div>
						<div class="down_part_r" v-if="item.type==1&&item.state==0" hover-class="bg">去支付</div>
						<div class="down_part_r" v-if="item.type==2&&item.state==0&&item.is_presale_state==1" hover-class="bg">支付预售款</div>
						<div class="down_part_r" v-if="item.type==2&&item.state==1&&item.is_presale_state==2" hover-class="bg">支付尾款</div>
						<div class="down_part_r b_color" v-if="item.type==1&&item.state==1||item.type==2&&item.state==1&&item.is_presale_state==3" @click.stop="MoneyBack(item.id)"  hover-class="bg">申请退款</div>
						<div class="down_part_r b_color" v-if="item.state==2" @click.stop="Confirm(item.id)"  hover-class="bg">确认收货</div>
					</div>
				</div>
			</div>
		</div>


		<div v-if="list.length != 0" class="lading">
			<div  v-if="lading == 1">上拉加载</div>
			<div  v-if="lading == 2">正在加载...</div>
			<div  v-if="lading == 3">没有更多数据了</div>
		</div>
		<div v-else class="no-data">
				<img src="../image/order.png" alt="">
				<div class="">
					暂无订单
				</div>
		</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			list: [],
			isFinish: false,
			page:1,
			size:20,
			lading:1,
		},

		mounted: function(){
			this.getData()
			this.setCustomRefreshHeaderInfo()// 下拉刷新
			this.myaddEventListener()// 监听页面打开
			this.vmaddEventListener()//上拉加载
		},

		methods: {
			// 监听页面打开
			myaddEventListener(){
				api.addEventListener({
				    name: 'viewappear'
				}, function(ret, err) {
						vm.getData(false)
				});
			},
			// 下拉刷新
			setCustomRefreshHeaderInfo: function(){
				api.setCustomRefreshHeaderInfo({
							bgColor: '#F8F8F8',
							tips: {
									pull: '下拉刷新',
									threshold: '松开立即刷新',
									load: '正在刷新'
							}
					}, function() {
							vm.getData() //获取数据
							// setTimeout(function() {
							//     api.refreshHeaderLoadDone()//关闭下拉刷新状态
							// }, 1000)
					});
			},
			// 上拉加载
			vmaddEventListener: function () {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
					vm.getDatapush()//获取数据  上拉加载
				});
			},
			//获取数据
			getData: function (loader){
				this.lading = 2
				this.page = 1
				let data = {
					type: 1,
					state: '',
					page: this.page,
					size: this.size
				}
				AjaxSafe({
			   	url:"/xapp/order/list",
					loader:loader,
					data:data,
					success: function(res) {

					    if (res.state) {
								let orders = (res.data || []).map(order=>{
									 order.pay = order.type == 1 ? order.total_amount : (order.is_presale_state == 1 ? order.earnest_charge_money : order.tail_charge_money + order.express_amount);
									 return order;
								 });
					        vm.list = orders

					    }
							else{
								vm.list = []
							}
							if(res.data)
								if(res.data.length < vm.size){
									vm.lading = 3
								}else{
									vm.lading = 1
								}
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
					},
					failed: function(err){
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
							alert("网络故障！");
					}
				});
			},
			//获取数据  上拉加载 分页
			getDatapush: function (loader){
				if(this.lading != 1) return
				this.lading = 2
				++this.page
				let data = {
					type: 1,
					state: '',
					page: this.page,
					size: this.size
				}
				AjaxSafe({
					url:"/xapp/order/list",
					loader:false,
					data:data,
					success: function(res) {

							if (res.state) {
								let orders = (res.data || []).map(order=>{
									 order.pay = order.type == 1 ? order.total_amount : (order.is_presale_state == 1 ? order.earnest_charge_money : order.tail_charge_money + order.express_amount);
									 return order;
								 });
									vm.list.push(...orders)
							}

							if(res.data)
								if(res.data.length < vm.size){
									vm.lading = 3
								}else{
									vm.lading = 1
								}
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
					},
					failed: function(err){
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
							alert("网络故障！");
					}
				});
			},
			// 申请退款
			MoneyBack: function (id) {
				hhPanel.confirm({
				    title: "申请退款",
				    content: "确定要申请退款吗？",
				    btns: ["取消","确定"]
				},function(){
					let param = {
							order_id: id
					}
					AjaxSafe({
				   		url:"/xapp/product/order/reimburse",
				    	data:param,
				    	loader:true,
						success: function(res) {
							   if (res.state) vm.getData()
						     api.toast({msg: res.msg,duration: 2000,location: 'middle'});
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				});
			},
			// 确认收货
			Confirm: function (evt) {
				hhPanel.confirm({
						title: "收货确认",
						content: "确认收货后，此订单将结束，是否继续？",
						btns: ["取消","确定"]
				},function(){
					let param = {
							order_id: id
					}
					AjaxSafe({
							url:"/xapp/order/finish",
							data:param,
							loader:true,
						success: function(res) {
								 if (res.state) vm.getData()
								 api.toast({msg: res.msg,duration: 2000,location: 'middle'});
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				});
			},



		},



	});
}
</script>
</html>
